<!-- 高级搜索 弹出窗  -->
<template>
    <div class="pop-warp">
        <el-dialog
            :show-close="false"
            :lock-scroll="false"
            :append-to-body="true"
            :close-on-click-modal="false"
            :visible.sync="getIsPopShow"
            custom-class="customWidth"
        >   
            <div class="pop-head">
                <h3 class="ctheme fs22">高级搜索</h3>
                <i class="el-icon-close fs20 cp c333 com-hover" @click="cancelPop"></i>
            </div>
            <div class="pop-cont">
                <h3 class="fs18 ctheme mt25">检索词</h3>
                <div class="flex mt10 ml35">
                    <div class="fs14">搜索范围：</div>
                    <div style="width:51px">
                        <el-select
                            v-if="popForm.scopeList.length>1" 
                            v-model="popForm.scopeVal"
                            :popper-append-to-body="false"
                            class="tj-select no-popper-arrow"
                        >
                            <el-option
                                v-for="item in scopeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </div>
                    <div class="ml7">
                        <div 
                            class="pop-scope-item"
                            v-for="(item,index) in popForm.scopeList"
                            :key="index"
                        >   
                            <div class="scope-radio">
                                <el-radio-group v-model="popForm.scopeList[0].type" v-if="index==0" >
                                    <el-radio label="all">标题或全文</el-radio>
                                    <el-radio label="title">标题</el-radio>
                                    <el-radio label="text">全文</el-radio>
                                    <el-radio label="keyword">关键词</el-radio>
                                </el-radio-group>
                            </div>
                            <div class="precise-wrap">
                                <div class="sort-left">
                                    <span>{{popForm.scopeList[0].mode=='exact'?'精确搜索':'模糊搜索'}}</span>
                                    <i class="el-icon-sort fs12 cp ctheme" style="transform: rotate(90deg);" @click="changeVag"></i>
                                </div>
                                <input type="text" class="precise-input" v-model.trim="item.value">
                            </div>
                            <i class="el-icon-close precise-close" @click="delScopeItem(index)"></i>
                        </div>
                    </div>
                </div>
                <div class="ml70 mt10">
                    <span class="cp fs14 ctheme" @click="addScopeItem">+添加检索词</span>
                </div>
                <div class="pop-line"></div>
                <h3 class="fs18 ctheme mt25">其他信息</h3>
                <div class="mt5 ml35">
                    <div class="pop-info-item">
                        <div class="info-label">内容品类：</div>
                        <el-select 
                            v-model="popForm.classId"
                            placeholder="请选择"
                            class="category-select"
                            :popper-append-to-body="false"
                        >
                            <el-option
                                v-for="item in classList"
                                :key="item._id"
                                :label="item.name"
                                :value="item._id"
                            ></el-option>
                        </el-select>
                        <el-radio-group class="info-radio ml5" v-model="popForm.radioVal">
                            <el-radio label="all">全部</el-radio>
                            <el-radio label="free">免费</el-radio>
                            <el-radio label="pay">付费</el-radio>
                        </el-radio-group>
                    </div>
                    <div class="pop-info-item">
                        <div class="info-label">作者：</div>
                        <el-input v-model.trim="popForm.author" class="info-input"></el-input>
                    </div>
                    <div class="pop-info-item">
                        <div class="info-label">发布单位：</div>
                        <el-input v-model.trim="popForm.local" class="info-input"></el-input>
                    </div>
                    <div class="pop-info-item">
                        <div class="info-label">发布时间：</div>
                        <el-date-picker
                            v-model="popForm.time"
                            type="daterange"
                            :picker-options="pickerOptions"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            align="center"
                            class="info-input"
                            :popper-append-to-body="false"
                            value-format="yyyy-MM-dd"
                        ></el-date-picker>
                    </div>
                    <div class="pop-info-item">
                        <div class="info-label">内容来源：</div>
                        <el-input v-model.trim="popForm.source" class="info-input"></el-input>
                    </div>
                </div>
            </div>
            <div class="pop-bottom">
                <button class="pop-btn pop-plain-btn" @click="resetPop">重置</button>
                <button class="pop-btn pop-full-btn"  @click="comfirmPop">搜索</button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "xszkHighSearch",
    props:{
        isPopShow:{
            type: Boolean,
            default: false,
        },
        currId:{
            type: String,
            default: 'all',
        }
    },
    computed: {
        classList(){
            return this.$store.getters.classList;
        },
        getIsPopShow:{
            get(){
                return this.isPopShow;
            },
            set(val) {},
        },
    },
    data() {
        return {
            scopeList:[
                {value: 'and',label: '且'},{value: 'or',label: '或'},{value: 'but',label: '不含'}
            ],
            popForm:{
                scopeVal:'and',
                scopeList:[
                    {type:'all',value:'',mode:'exact'},
                ],
                classId:'all',
                radioVal:'all',
                author:'',
                local:'',
                time:'',
                source:''
            },
            isVague:true,
            pickerOptions: {shortcuts: [
                {
                    text: '过去7天',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end]);
                    }
                },
                {
                    text: '过去14天',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 14);
                    picker.$emit('pick', [start, end]);
                    }
                },
                {
                    text: '过去30天',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                    }
                }, 
                {
                    text: '过去60天',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 60);
                    picker.$emit('pick', [start, end]);
                    }
                }, 
                {
                    text: '过去90天',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    picker.$emit('pick', [start, end]);
                    }
                }, 
                {
                    text: '过去180天',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
                    picker.$emit('pick', [start, end]);
                    }
                }
            ]},
           
        };

    },
    methods: {
        changeVag(){
            this.popForm.scopeList[0].mode = this.isVague?'fuzzy':'exact';
            this.isVague = !this.isVague;
        },
        addScopeItem(){
            if(this.popForm.scopeList.length>=5){
                this.toast.info("关键词最多添加5个")
                return false;
            }
            let scopeItem = {type:this.popForm.scopeList[0].type,value:'',mode: this.popForm.scopeList[0].mode};
            this.popForm.scopeList.push(scopeItem);
        },
        delScopeItem(index){
            if(index==0){
                this.toast.info("关键词最少添加1个");
                return false;
            }
            this.popForm.scopeList.splice(index,1);
        },
        resetPop(){
            this.popForm.scopeVal = 'and';
            this.popForm.scopeList = [{type:'all',value:'',mode:'exact'}];
            this.popForm.classId = 'all'; 
            this.popForm.radioVal = 'all';
            this.popForm.author = '';
            this.popForm.local = '';
            this.popForm.time = '';
            this.popForm.source = '';
            this.$emit("resetPop");
        },
        cancelPop(){
            this.$emit("cancelPop");
        },
        comfirmPop(){
            if(!this.popForm.scopeList[0].value&&!this.popForm.author&&!this.popForm.local&&!this.popForm.time&&!this.popForm.source){
                this.toast.info("请输入关键词进行搜索");
                return false;
            }
            this.$emit("comfirmPop",this.popForm);
            
        },

    },
    created() {
        this.popForm.classId = this.currId; 
    },
    watch:{
        getIsPopShow:{
            handler(newVal,oldVal){
                if(!newVal){
                    this.resetPop();
                    this.popForm.classId = this.currId; 
                }
            }
        },
        currId:{
            handler(newVal,oldVal){
                if(newVal){
                    console.log(newVal);
                    this.popForm.classId = newVal;
                }
            },
        }
    }
   

};
</script>

<style lang="stylus" scoped>
/deep/.tj-select.el-select
    width 51px
    height 21px
/deep/.tj-select .el-input__inner
    font-size 14px
    border 1px solid #979797
    padding 0 5px
    height 21px
    color #333
    border-radius 0
/deep/.tj-select .el-input__suffix
    top 0px
    right -2px
/deep/.tj-select .el-select__caret 
    background url("../static/images/down.png") no-repeat center
    background-size 9px 10px
/deep/.tj-select .el-input__suffix .el-icon-arrow-up:before 
    content: ""
/deep/.tj-select .el-select-dropdown
    width 51px
/deep/.tj-select .el-select-dropdown__item
    font-size 14px
    padding 0 10px
    text-align center
/deep/.tj-select .el-input__icon
    line-height 21px
/deep/.tj-select .el-select-dropdown__item:hover,
/deep/.tj-select .el-select-dropdown__item.selected
/deep/.category-select .el-select-dropdown__item:hover,
/deep/.category-select .el-select-dropdown__item.selected
    color #3266CC
    font-weight normal
/deep/.scope-radio .el-radio
    margin-top 3px
    margin-left 10px
    margin-right 0 !important
/deep/.el-radio__label
    padding-left 5px
/deep/.info-radio .el-radio
    margin-top 3px
    margin-left 40px
    margin-right 0 !important
/deep/.category-select.el-select
    width 292px
    height 24px
/deep/.category-select .el-input__inner
    font-size 12px
    border 1px solid #979797
    padding 0 5px
    height 24px
    color #333
    border-radius 0
/deep/.category-select .el-input__inner::-webkit-input-placeholder,
/deep/.info-input .el-input__inner::-webkit-input-placeholder
    color #333
    font-size 12px
/deep/.category-select.el-select .el-input .el-select__caret
    font-size 16px
    color #fff
    font-weight bolder
/deep/.category-select .el-select-dropdown__item
    text-align left
    font-size 12px
/deep/.category-select .el-input__icon
    line-height 24px
/deep/.category-select .el-input__suffix
    right 0
    background #3266CC
/deep/.category-select .el-select-dropdown__wrap
    max-height 220px
/deep/.info-input .el-input__inner,/deep/.info-input.el-range-editor.el-input__inner
    padding-left 5px
    width 599px
    height 24px
    border 1px solid #979797
    font-size 12px
    color #333
    border-radius 0
/deep/.info-input.el-date-editor .el-range-input
    line-height 18px
    font-size 12px
    width 66px
    color #666
/deep/.info-input.el-date-editor .el-range-separator
    padding 0
    font-size 12px
    line-height 17px
    color #666
/deep/.info-input.el-date-editor .el-range-input::-webkit-input-placeholder
    font-size 12px
    color #666
/deep/.info-input.el-date-editor .el-range__icon
    line-height 17px
    color #3266cc
/deep/.info-input.el-date-editor .el-range__close-icon
    line-height 17px   
/deep/.el-dialog__header,/deep/.el-dialog__body
    padding 0
/deep/.customWidth
    width 908px
    border-radius 8px
.pop-head
    width 100%
    height 58px
    padding 0 25px
    background #F4F4F4
    border-radius 8px 8px 0 0
    display flex
    justify-content space-between
    align-items center
.pop-cont
    padding 0 25px
    .pop-line
        margin-top 7px
        width 100%
        height 1px
        background #d7d7d7
    .pop-scope-item
        display flex
        align-items center
        margin-bottom 8px
        .scope-radio
            width 285px
        .precise-close
            font-size 18px
            cursor pointer
            color #999
            margin-left 30px
        .precise-wrap
            display flex
            align-items center
            width 320px
            height 24px
            margin-left 15px
            border 1px solid #979797
            .sort-left
                display flex
                align-items center
                justify-content space-between  
                width 87px
                height 24px
                border-right 1px solid #979797
                padding 0 6px 0 9px
                font-size 14px
            .precise-input
                width 220px
                height 100%
                padding-left 5px
                font-size 14px
        
    .pop-info-item
        display flex
        align-items center
        margin-top 15px
        .info-label
            font-size 14px
            min-width 70px
            margin-right 75px
.pop-bottom
    padding 24px 40px 
    text-align right
    .pop-btn
        cursor pointer
        width 130px
        height 40px
        line-height 38px
        font-size 18px
        border-radius 4px
        &.pop-plain-btn
            color #333
            border 1px solid #3266CC
            border-radius 4px
        &.pop-full-btn
            background #3266CC
            color #fff
            margin-left 16px
        &:hover
            opacity 0.9
    


</style>
